@import "default";
@import "custom-theme";

//合并用户自定义主题
$themes: map_merge($theme-default, $custom-theme);

//生成主题
/*
@include theme {
  body {
    color: $colorPrimary;
  }
}
//↑ 会生成如下 ↓
!*html body {
  color: #12b4a5;
}

.theme-blue body {
  color: #409EFF;
}

.theme-violet body {
  color: #8A2BE2;
}*!
*/
@mixin theme {
  //@debug ----------------- $themes --------------------;
  @each $curThemeName, $curTheme in $themes {
    //@debug "$curThemeName: #{$curThemeName}";
    @include generateThemeContent($curThemeName, $curTheme) {
      //theme mixin接受到的ContentBlock再次传递给了 generateThemeContent 这个mixin
      @content;
    }
  }
}

//是否生成默认主题（自定义主题没有设置的字段则会采用默认主题的值）
$generate_default: true;

@mixin generateThemeContent($name,$theme) {
  //当前正在@each迭代的主题
  $globalTheme: $theme !global;
  //当前正在@each迭代的主题的名字
  $globalThemeName: $name !global;

  $colorPrimary: g(colorPrimary) !global;
  $colorPrimaryLight: mix(white, $colorPrimary, 85%) !global;
  $colorSuccess: g(colorSuccess) !global;
  $colorWarn: g(colorWarn) !global;
  $colorError: g(colorError) !global;
  $colorInfo: g(colorInfo) !global;
  $disabled: g(disabled) !global;
  $disabledLight: g(disabledLight) !global;
  $disabledDeep: g(disabledDeep) !global;
  $disabledText: g(disabledText) !global;
  $font: g(font) !global;
  $ibc: g(ibc) !global;
  $ibl: g(ibl) !global;
  $itc: g(itc) !global;
  $itl: g(itl) !global;
  $ihc: g(ihc) !global;
  $ipc: g(ipc) !global;
  $icc: g(icc) !global;
  $transitionFlexible: g(transitionFlexible) !global;
  $transition: g(transition) !global;
  $transition2: g(transition2) !global;
  $shapeFillet: g(shapeFillet) !global;
  $shapeRound: g(shapeRound) !global;
  $shapeNone: g(shapeNone) !global;
  $popperRadius: g(popperRadius) !global;
  $boxshadow: g(boxshadow) !global;
  $boxshadowColor: g(boxshadowColor) !global;

  //为了↓ 的@content 能用到 ↑的变量, 故上面的变量都用到了 !global
  @if (str_length($name)>0) {
    .theme-#{$name} {
      @content;
    }
  } @else {
    //说明是默认主题
    html {
      @if ($generate_default) {
        @content;
      }
    }
  }
}

//dt--->default theme 默认主题(从二维里取出的一维map)
$dt: map_get($theme-default, '');

/**
 * generate one specified theme field variable value, g ---> generate
 * 会先从指定指定的主题中找有没有对应的值
 * ,如果没有 则用默认主题中找对应的值
 */
@function g($key) {
  @if (map_has_key($globalTheme, $key)) {
    @return map-get($globalTheme, $key);
  } @else {
    @return map-get($dt, $key);
  }
}

//todo emmm 加了这些mixin 但是我们在theme-edit-panel.tsx里引用和使用$$dialog 依然报错
@mixin statusMixin($component) {
  @each $key in (Primary, Success, Warn, Error, Info) {

    $value: g(color#{$key}) !global;
    //↑ 下面的@content会用到

    $name: to-lower-case($key) !global;
    &.pl-#{$component}-status-#{$name} {
      @content;
    }
  }
}

@mixin shapeMixin($component) {
  @each $key in (Fillet, Round, Square) {

    $value: g(shape#{$key}) !global;

    $name: to-lower-case($key) !global;
    &.pl-#{$component}-shape-#{$name} {
      @content;
    }
  }
}

@mixin sizeMixin($component) {
  @each $key in (Large, Normal, Mini) {

    $value: g(size#{$key}) !global;

    $name: to-lower-case($key) !global;
    &.pl-#{$component}-size-#{$name} {
      @content;
    }
  }
}

@mixin public-style {
  box-sizing: border-box;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

@mixin transition {
  transition: all $transition 300ms;
}
